import useRole from '@/hooks/useRole';
import { Image, Navigator, Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { RoleType } from 'types/user';

export default function Page() {
  const ROLES = [
    {
      label: '平台专家',
      value: RoleType.专家,
    },
    {
      label: '企业用户',
      value: RoleType.用户,
    },
    {
      label: '平台合作伙伴',
      value: RoleType.合伙人,
    },
  ];

  const { update: updateRole } = useRole();

  return (
    <View
      className=' min-h-screen bg-cover pt-[260px]'
      style={{
        backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/bg2.jpg)`,
      }}
    >
      <View className=' px-3 mb-[60px]'>
        <Text className=' text-xl text-black  font-bold'>请选择你的身份</Text>
        <Text className=' block text-sm text-gary1'>
          我们将根据您的身份校验或创建账号
        </Text>
      </View>

      {ROLES.map((item) => (
        <View
          key={item.value}
          className='w-[750px] h-[308px] bg-cover relative -mb-[40px]'
          style={{
            backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/bg3.png)`,
          }}
          onClick={() => {
            updateRole(item.value);
            Taro.redirectTo({
              url: `/pages/login/index?role=${item.value}`,
            });
          }}
        >
          {/* icon */}
          <Image
            src='https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/icon-role-1.png'
            mode='aspectFill'
            className='w-[354px] h-[230px] absolute left-[30px] top-0'
          />

          <Text className=' text-xl font-bold absolute top-[116px] left-[400px]  text-blue1'>
            {item.label}
          </Text>
        </View>
      ))}

      <Text
        onClick={() => {
          Taro.reLaunch({ url: '/pages/index/index' });
        }}
        className=' text-lg text-primary font-bold text-gary4 text-center block relative z-10 mt-2'
      >
        返回首页
      </Text>

      <View className='text-center text-gary1 text-xs absolute bottom-9 left-0 right-0'>
        欢迎登录臻会帮企业服务平台
      </View>
    </View>
  );
}
